/************************* PC ************************/
@media screen and (max-width:2560px) and (min-width:1000px){

}

/************************* mobile pad ************************/
@media screen and (max-width:1000px){
    html,body,.pageWrap,.wrap{
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
    }
    html{
        overflow: hidden;
    }
    section{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
    }
    section .btn{
        width: 4rem;
        height: 1rem;
        background-color: #333;
        border-radius: 0.1rem;
        text-align: center;
        font-size: 0.35rem;
        color: #fff;
        line-height: 1rem;
        letter-spacing: 0.1rem;
        cursor: pointer;
    }
    .wrap section input{
        display: block;
        width: 6rem;
        height: 1rem;
        border: 1px solid #333;
        border-radius: 0.1rem;
        background-color: #fff;
        font-size: 0.35rem;
        padding: 0 0.2rem;
        text-align: center;
    }
    /* public end */

    #loginBox p{
        font-size: 0.4rem;
        font-weight: bold;
        color: #333;
        padding: 0.5rem 0;
        text-align: center;
    }
    #loginBox .label{
        width: 6rem;
        height: 1rem;
        margin: 0.7rem auto;
    }
    #loginBox .btn{
        margin: 0 auto;
    }
    /* loginBox end */

    #choseBox .cont{
        width: 100%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
    }
    #choseBox .btn{
        margin: 0 auto 0.7rem;
    }
    /* choseBox end */

    #pptBox .btn{
        margin: 1rem auto;
    }
    /* pptBox end */

    #musicBox p{
        font-size: 0.4rem;
        text-align: center;
        padding: 0.7rem 0;
    }
    #musicBox .btn{
        margin: 1rem auto;
    }
    /* musicBox end */

    #changeNameBox .box{
        width: 100%;
        height: auto;
    }
    #changeNameBox .block{
        width: 100%;
        height: 1rem;
        margin: 0.2rem 0;
    }
    #changeNameBox .block .color{
        float: left;
        width: 1rem;
        height: 1rem;
        border-radius: 0.1rem;
        margin:0 0.15rem;
    }
    #changeNameBox .block input{
        float: left;
        width: 4rem;
        margin-right: 0.15rem;
    }
    #changeNameBox .block .btn{
        float: left;
        width: 2rem;
    }
    #changeNameBox .back{
        margin: 0.7rem auto;
    }
    /* changeNameBox end */

    #changeScoreBox .box{
        width: 100%;
        height: auto;
    }
    #changeScoreBox .block{
        width: 100%;
        height: 1rem;
        margin: 0.2rem 0;
    }
    #changeScoreBox .block .color{
        float: left;
        width: 0.5rem;
        height: 1rem;
        border-radius: 0.1rem;
        margin:0 0.05rem;
    }
    #changeScoreBox .block .name,#changeScoreBox .block .socre{
        float: left;
        width: 1rem;
        height: 1rem;
        margin:0 0.05rem;
        font-size: 0.25rem;
        text-align: center;
        border: 1px solid #333;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        line-height: 1rem;
    }
    #changeScoreBox .block .name{
        width: 1.5rem;
    }
    #changeScoreBox .block .socre{
        width: 0.7rem;
        font-size: 0.3rem;
        font-weight: bold;
    }
    #changeScoreBox .block .btn{
        float: left;
        width: 1rem;
        margin:0 0.05rem;
    }
    #changeScoreBox .back{
        margin: 0.7rem auto;
    }
    /* changeScoreBox end */
}

/************************* 15:9 android 微信 && 16:9 浏览器 ************************/
@media screen and (device-width:360px) and (max-height:540px), screen and (device-width:320px) and (max-height:470px), screen and (device-width:375px) and (max-height:560px), screen and (device-width:414px) and (max-height:630px){
	
}

/************************* 18:9 android 微信 ************************/
@media screen and (device-width:360px) and (min-height:600px), screen and (device-width:393px) and (min-height:660px){

}

/************************* 18:9 android 微信 no system bar ************************/
@media screen and (device-width:360px) and (min-height:620px), screen and (device-width:412px) and (min-height:720px){

}

/************************* 18:9 android 浏览器 ************************/
@media screen and (device-width:360px) and (min-height:540px) and (max-height:560px), screen and (device-width:393px) and (min-height:600px) and (max-height:620px){
}

/************************* iphoneX 微信 ************************/
@media screen and (device-width:375px) and (min-height:720px){
	
}

/************************* iphoneX 浏览器 ************************/
@media screen and (device-width:375px) and (min-height:630px) and (max-height:640px){

}